<template>
	<view class="yb-flex yb-flex-1">
		<yb-popup popout="fade" direction="center" :visible="show" @hide="hide">
			<view class="padding-gap yb-flex yb-align-center">
				<yb-tap @click="showActionSheet">
					<yb-image custom-class="share-poster" :src="poster" mode="aspectFit"></yb-image>
				</yb-tap>
				<yb-tap custom-style="margin-top: 20rpx" @click="hide">
					<yb-icon  name="fork-circle" :size="60" :color="skinColor.color_white"></yb-icon>
				</yb-tap>
			</view>
		</yb-popup>
		<yb-poster ref="poster"></yb-poster>
		<yb-notify ref="notify"></yb-notify>
		<yb-action-sheet ref="actionSheet"></yb-action-sheet>
	</view>
</template>

<script>
	import appMixin from '@/common/mixin/app.js'
	export default {
		mixins: [appMixin],
		data () {
			return {
				form: [],
				options: {},
				poster: '',
				show: false,
				windowHeight: 0
			}
		},
		onLoad(data) {
			this.windowHeight = uni.getSystemInfoSync().windowHeight
			this.options = data.options && JSON.parse(decodeURIComponent(data.options))
			this.form = data.form && JSON.parse(decodeURIComponent(data.form))
		},
		onReady() {
			this.$nextTick(function () {
				this.$refs.poster.start({
					options: this.options,
					data: this.form,
					success: (res) => {
						this.poster = res.tempFilePath
						this.show = true
						uni.hideLoading()
					}
				})
			})
		},
		methods: {
			showActionSheet () {
				this.$refs.actionSheet.show({
					title: {
						text: '更多操作',
						color: this.skinColor.color_2
					},
					itemList: [{
						label: '分享海报',
						value: 'share'
					},{
						label: '保存海报',
						value: 'save'
					}],
					options: {
						cancel: {
							text: '关闭',
							color: this.skinColor.color_1
						},
						bgColor: this.skinColor.color_bg_2,
						color: this.skinColor.color_1,
						border: {
							color: this.skinColor.color_gap_1,
						}
					},
					success: (res) => {
						if ( res.confirm ) {
							if ( res.data.detail.value == 'save' ) {
								uni.saveImageToPhotosAlbum({
									filePath: this.poster,
									success: () => {
										this.$refs.notify.success('成功保存图片到相册')
									},
									fail: err => {
										this.$refs.notify.fail(err.toString())
									}
								})
							}
							if ( res.data.detail.value == 'share' ) {
								this.app.$business.shareFile(this.poster)
							}
						}
					}
				})
			},
			hide () {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	page {
		background: transparent;
	}
	.share-poster {
		width: 700rpx;
		height: 1000rpx;
	}
</style>